<template>
  <div>

    <CategorySelector :isShow="!isShow"></CategorySelector>
    <el-card style="margin-top:20px">
      <div v-if="isShow">
        <el-button type="primary" :icon="Plus" :disabled="!Selector.category3Id" @click="addAttrs">添加属性</el-button>

        <el-table border style="margin-top:20px" :data="AttrList">
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="attrName" label="属性名称" width="160" />
          <el-table-column label="属性列表">

            <template v-slot="{ row }">
              <el-tag type="info" style="margin-right:20px" v-for="c1 in row.attrValueList"
                :key="c1.id">{{ c1.valueName }}</el-tag>
            </template>

          </el-table-column>
          <el-table-column label="操作" width="160">

            <template v-slot="{ row }">
              <el-button type="warning" :icon="Edit" size="small" @click="EditAttrValues(row)"></el-button>

              <el-popconfirm title="你确定要删除这条属性码" @confirm="confirmEvent(row)" @cancel="cancelEvent">
                <template #reference>
                  <el-button type="danger" :icon="Delete" size="small"></el-button>
                </template>
              </el-popconfirm>



            </template>




          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" width="40%" v-model="attrInfo.attrName" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="margin-right:20px" @click="addAttrValue"
              :disabled="!attrInfo.attrName">添加属性</el-button>
            <el-button @click="isShow = true">取消</el-button>
          </el-form-item>
        </el-form>

        <el-table border style="margin-top:20px" :data="attrInfo.attrValueList">
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="valueName" label="属性值名称" width="250" align="center">


            <template v-slot="{ row, $index }">
              <el-input ref="InputRef" v-if="row.IsShowInput == true" @blur="LoseAttrValueList(row)"
                v-model="row.valueName" size="small"></el-input>
              <span v-else style="display:inline-block;width:100%" @dblclick="editAttr(row, $index)">{{ row.valueName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">

            <template v-slot="{ row, $index }">
              <el-popconfirm title="确定要删除这条属性码" @confirm="confirmEvents($index)" @cancel="cancelEvents">
                <template #reference>
                  <el-button :icon="Delete" type="danger"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:20px">
          <el-button type="primary" @click="addOrupdateAttrData"
            :disabled="!attrInfo.attrValueList.length">保存</el-button>
          <el-button @click="isShow = true">取消</el-button>
        </div>
      </div>





    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Attr'
}
</script>
<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus
} from '@element-plus/icons-vue'
import { reqGetAttrListData, reqDelteAttrData, reqUpdateData } from "@/api/product/Attr"
//引入pina
import { useCategorySelectorStore } from "@/stores/CategoryList"
//引入类型约束
import type { AttrInfoModel, attrModel } from "@/api/product/model/AttrListModel"

//是否展示添加属性的压面
const isShow = ref(true)
//获取输入框的对象
const InputRef = ref()

const Selector = useCategorySelectorStore()
//定义可以在本文件存储的数据,防止丢失响应式
const AttrList = ref<AttrInfoModel[]>([])
//定义一个对象，用来收集要添加的属性信息
const attrInfo = reactive<AttrInfoModel>({
  attrName: '',//要存储的属性名
  attrValueList: [
    {
      // attrId: -1,
      valueName: '',
      IsShowInput: true

    }
  ],//存储属性值的数组
  categoryId: 1,//三级id
  categoryLevel: 3//几级id


})


//定义可以获取属性列表的数据的方法‘
const getAttrList = async () => {
  const res = await reqGetAttrListData({
    category1Id: Selector.category1Id,
    category2Id: Selector.category2Id,
    category3Id: Selector.category3Id,

  })
  // console.log(res)
  AttrList.value = res

}
//3监视3级id的变化。
watch(
  () => Selector.category3Id,
  (sum) => {
    if (!Selector.category3Id) {
      //清空属性列表
      AttrList.value = []
      return
    }
    getAttrList()

  },
  {
    immediate: true
  }
)

//4删除属性
const confirmEvent = async (row :AttrInfoModel) => {
  await reqDelteAttrData(row.id as number)
  ElMessage.success('成功删除了。。')
  //重新再渲染数据
  getAttrList()
}
//为成功删除属性
const cancelEvent = () => {
  // console.log('cancel!')
  ElMessage.info('未成功删除')
}
//5添加属性
const addAttrValue = () => {
  attrInfo.attrValueList.push({

    valueName: '',
    IsShowInput: true
  })
  //等待页面中数据完成后再获取焦点
  nextTick(() => {
    InputRef.value?.focus()


  })


}

//6失去焦点，切换span，要是没有写东西的话自动删除
const LoseAttrValueList = (row:attrModel) => {

  if (!row.valueName) {
    attrInfo.attrValueList.splice(-1, 1)

    return
  }
  // 切换span标签
  row.IsShowInput = false

}
//7双击span标签进入输入框
const editAttr = (row:attrModel) => {
  //切换输入框
  row.IsShowInput = true;
  //然后再重新获取焦点
  InputRef.value?.focus()

}
//8删除一条属性值
const confirmEvents = (index: number) => {
  //删除一条属性
  attrInfo.attrValueList.splice(index, 1)
  //展示
  ElMessage.success('删除成功了')
  //重新请求数据
  getAttrList()

}
const cancelEvents = () => {
  ElMessage.info('删除失败了')
}




//9添加或者更新属性
const addOrupdateAttrData = async () => {
  //获取一线三级id
  attrInfo.categoryId = Selector.category3Id as number
  await reqUpdateData(attrInfo)
  // 弹出提示
  ElMessage.success('添加成功了')
  //跳转到属性页面

  isShow.value = true;
  //重新渲染数据
  getAttrList()
}
//10编辑这条属性
const EditAttrValues = (row:AttrInfoModel) => {
  //跳转到了添加属性的页面
  isShow.value = false;
  //将数据回显
  Object.assign(attrInfo, row)

}
//11点击添加属性的这个按钮清空以前的值
const addAttrs = () => {
  //跳转到添加属性页面
  isShow.value = false
  attrInfo.attrName = '',
    attrInfo.attrValueList = [],
    //为了区分是更新还是添加数据
    delete attrInfo.id ;
}

</script>
<style >

</style>